<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="addDiavisible"
      width="70%"
      @close="cancel"
      @opened="beforeopen"
    >
      <el-form
        :model="form"
        ref="formRef"
        label-width="110px"
        label-position="left"
      >
	  
        <el-row :gutter="20">
          <el-col :lg="12" :xl="12">
            <el-form-item label="居民姓名">
              <el-input v-model="form.residentName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xl="12">
            <el-form-item label="身份证号">
              <el-input v-model="form.idCard"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :lg="12" :xl="12">
            <el-form-item label="性别">
              <el-input v-model="form.sex"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xl="12">
            <el-form-item label="年龄">
              <el-input v-model="form.age"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :lg="12" :xl="12">
            <el-form-item label="手机号">
              <el-input v-model="form.residentPhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xl="12">
            <el-form-item label="服务时间">
              <el-date-picker
                v-model="form.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :lg="12" :xl="12">
            <el-form-item label="所属机构">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xl="12">
            <el-form-item label="签约医生">
              <el-input v-model="form.hospitalUserName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格 -->
      <el-table class="mt-20" ref="tableRef" :data="tableData" border stripe>
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column
          prop="servicePackageId"
          label="服务包ID"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="servicePackageName"
          label="服务包名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="performanceTime"
          label="履约时间"
          align="center"
          :formatter="formatter1"
        >
        </el-table-column>
        <el-table-column
          prop="commentLevel"
          label="评分"
          align="center"
          :formatter="formatter2"
        >
        </el-table-column>
        <el-table-column
          prop="Completion"
          label="完成度"
          align="center"
          :formatter="formatter"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="200px"
        >
          <template slot-scope="scope">
            <el-popover
              :ref="scope.row.id"
              placement="top"
              width="180"
            >
              <p>确定解约吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
                <el-button :loading="delLoading" type="primary" size="mini" @click="check(scope.row)">确定</el-button>
              </div>
              <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">解约</el-button>
            </el-popover>
            <HButton
              @click="evaluate(scope.row)"
              type="check"
              size="mini"
              v-if="ifResident == true && scope.row.ifEva == true"
              >评价</HButton
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <perSelect ref="perSelect" @transData="transData"></perSelect>
    <perEvalute ref="perEvalute" @transData="transData"></perEvalute>
  </div>
</template>

<script>
import perSelect from "./components/Performance-select.vue";
import perEvalute from "./components/Performance-evaluate.vue";
import { getPerformance } from "@/api/family_doctor/family_doctor";
import { rescindContract } from "@/api/family_doctor/servicePackageDetail";
export default {
  components: { perSelect, perEvalute },
  data() {
    return {
      addDiavisible: false,
      ifEva: false,
      title: "履约",
      ifResident: true,
      form: {},
      tableData: [],
	  delLoading : false,
    };
  },
  created() {},
  methods: {
    //关闭
    cancel() {
      for (var key in this.form) {
        this.form[key] = "";
      }
      this.$emit("transData");
      this.addDiavisible = false;
    },
    getTableData() {
      getPerformance(this.form.id).then((res) => {
        if (res.data != null) {
          this.tableData = res.data;
        }
      });
    },
    //弹窗渲染之前
    beforeopen() {
      this.ifResidentFunc();
    },
    //供父组件调用函数
    openDialog(title, row) {
      this.form = row;
      this.form.dateRange = [];
      this.form.serviceStartTime = this.timestampToTime(row.serviceStartTime);
      this.form.serviceEndTime = this.timestampToTime(row.serviceEndTime);
      this.form.dateRange.push(this.form.serviceStartTime);
      this.form.dateRange.push(this.form.serviceEndTime);
      this.form.name = row.mechName + " " + row.groupName;
      if (row.sex == "0") {
        this.form.sex = "女";
      } else {
        this.form.sex = "男";
      }
      this.title = title;
      this.getTableData();
      this.addDiavisible = true;
    },
    //医生解约
    check(row) {
		rescindContract(this.form.id,row.servicePackageId).then(res=>{
			window.location.reload();
		});
    },
    //居民评价
    evaluate(row) {
      this.$refs.perEvalute.openDialog(row, this.form.idCard, this.form.id);
    },
    //判断角色
    ifResidentFunc() {
      let arr = this.$store.state.roleTypes;
      if (arr.length > 0) {
        this.ifResident = false;
      } else {
        this.ifResident = true;
      }
    },
    //补0
    appendZero(obj) {
      if (obj < 10) {
        return "0" + obj;
      } else {
        return obj;
      }
    },
    //时间戳转日期
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = this.appendZero(date.getDate());
      return Y + M + D;
    },
    //数据转换
    formatter(row) {
      row.ifEva=false
      let denominator = 0;
      row.servicePackageDetailRespList.forEach((e) => {
        denominator = denominator + e.yearServiceCount;
      });
      let molecule = 0;
      if ("completeContent" in row || row.completeContent != null||row.completeContent != '') {
        for (var key in row.completeContent) {
          molecule = molecule + row.completeContent[key].length;
        }
      }
      if (denominator > 0 && denominator == molecule) {
        row.ifEva = true;
      }
      return molecule + "/" + denominator;
    },
    formatter1(row) {
      if (row.performanceTime != null) {
        return this.timestampToTime(row.performanceTime);
      }
    },
    formatter2(row) {
      return row.commentLevel == "1"
        ? "一般"
        : row.commentLevel == "2"
        ? "满意"
        : row.commentLevel == "3"
        ? "非常满意"
        : "";
    },
    transData() {},
  },
};
</script>
<style lang="less" scoped>
</style>